<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/foreHeader.jsp" %>
<link rel="stylesheet" href="css/index.css">
<div class="head-div">
<div class="container1" style="width:100%">
<!-- 导航栏 -->
	<%@include file="foreNav.jsp" %>
	<!-- 视频主区 -->
	<div>
	<div class="tv-main-outbig">
		<!-- 左侧视频div -->
		<div id="002" >
			<!-- 中间播放器 -->
			<div class="tv-player">
				<video src="playTv/${tv.video_url}" class="tvPlay" controls="controls" preload="auto">
				Your browser does not support the video tag.
				</video>
			</div>
			<div style="text-align:right;width:1400px;">
			<span style="position:relative;"><div class="heart" id="like1" rel="like" style="float:right;position:absolute;top:-27px;left:-55px;display:inline;"></div></span>
			<span class="icon-margin" id="likeCount1">${praiseTimes}</span>
			<span  class="icon-margin"><a href=""><img class="icon-font" style="width:17px;" src="img/share.png"> 分享</a></span>
			</div>
		</div>
	</div>
	</div>
</div>	
</div>

<!-- 影片信息显示与评分  -->
<div class="tv-info-middle">
	<div>
		<span style="float:left;"><font size="+2">${tv.name}</font></span><font color="red" size="+3" face="华文行楷" style="margin-left:30px;"><c:if test="${empty tv.grades}">X.X</c:if><c:if test="${!empty tv.grades}">${tv.grades}</c:if></font>分
		<div style="clear:both;"><span><img  class="icon-font"src="img/eye.png" style="margin-bottom:3px;">${playTimes}</span></div>
	</div>

</div>



<!-- 广告栏 -->
<div>

</div>
<!-- 猜你喜欢+评论 -->
<div class="like-remark" >
<div class="guess-you-like">
	<div>
	<font  size="+2" color="#009CFF">▌</font><font  size="+1">猜你喜欢</font>
	</div>
	<c:if test="${empty tvsLikeGuess}">
		<font>暂无推荐数据，请多多看片哦~</font>
	</c:if>
	<table style="border-collapse:separate;border-spacing:32px 22px;position:relative;left:-32px;"><tr>
	<c:forEach items="${tvsLikeGuess}" var="tv1">
	<td class='tvtd'>
		<span>
			<a id='choose_img'   target='_Blank' href='palytvPage?id=${tv1.id}'>
				<img  width='180px' height='240px' class='img-rounded' src='virtual_img/${tv1.img_url}'>
			</a>
			<br>
			<a class='top-link' target='_Blank' href='palytvPage?id=${tv1.id}'>${tv1.name}</a><font color='red' class='pull-right'>${tv1.grades}</font><br>
			<font color='#989898' class='tvDescri' title='${tv1.descri}'></font>
		</span>
	</td>
	</c:forEach>
	</tr></table>
	<div style="clear:both;width:1000px;height:200px;"><a href="http://www.rngtest.com/e6du2l5/4y4jf5dr/2kr2954.html?bb2=bzdccs_837230"><span id="adv"style="text-shadow:10px 10px 3px blue;cursor:pointer;font-size:22px;color:blue;font-weight:bold;">屠龙宝刀，点击就送<br><img alt="" src="img/adv.png"></span></a></div>
</div>

<div class="remark" style="height:900px;position:relative;">
	<div style="position:relative;">
		<font  size="+2" color="#009CFF">▌</font><font  size="+1">评论</font><font id="sumRemark">(共0条)</font><span style="position:absolute;bottom:0px;right:0px;">还可以输入<font id="remarkFontCount"color="#1AA7FF">140</font>个字</span>
	</div>
	<textarea  id="remarkContent" class="form-control" style="margin-top:20px;height:130px;" placeHolder="不得超过140字"></textarea>
	<!-- 评论的小星星 -->
	<div id="QuacorGrading" style="width:90%;">
	<input name="1" type="button" />	
	<input name="2" type="button" />
	<input name="3" type="button" />
	<input name="4" type="button" />
	<input name="5" type="button" />
	<input name="6" type="button" />
	<input name="7" type="button" />
	<input name="8" type="button" />
	<input name="9" type="button" />
	<input name="10" type="button" />
	<span id="QuacorGradingValue"><font size="+1" id="remarkGrades" color="#fd7d28">0</font>分</span>
	
	</div>
	<button type="button" class="btn btn-info btn-sm pull-right" onClick="submitRemark()" style="margin-top:8px;">发表评论</button>
	<!-- 评论区域 -->
	<div id="remark" style='clear:both'>
	
	</div>
		
	<div id="pageSet" class="page-set">
		<a id="pageIndex" load="1" href="javaScript:void(0)">[首  页]</a>
		<a id="pageBefore"  href="javaScript:void(0)">[上一页]</a>
		<a id="pageAfter"  href="javaScript:void(0)">[下一页]</a>
		<a id="pageEnd"  href="javaScript:void(0)">[末  页]</a>
    </div>
</div>
</div>
<input type="hidden" id="tvId" value="${tv.id}">
<%@include file="../include/fore/foreFooter.jsp" %> 
<script>
//点赞特效
$('body').on("click",'.heart',function(){
	
	var A=$(this).attr("id");
	var B=A.split("like");
	var messageID=B[1];
	var C=parseInt($("#likeCount"+messageID).html());
	$(this).css("background-position","")
	var D=$(this).attr("rel");
	var tvId = $("#tvId").val();
	var no = "NO";
	var yes="YES";
   //喜欢操作
	if(D === 'like') {    
		$.ajax({
			url:"praise",
			data:{type:yes,tvId:tvId},
			success:function(data){
				if(data=="LOGIN"){
					location="/loginPage";
				}
			}
		});
		$("#likeCount"+messageID).html(C+1);
		$(this).addClass("heartAnimation").attr("rel","unlike");
	}
   //不喜欢操作
	else{
		$.ajax({
			url:"praise",
			data:{type:no,tvId:tvId},
			success:function(data){
				if(data=="LOGIN"){
					location="/loginPage";
				}
			}
		});
		$("#likeCount"+messageID).html(C-1);
		$(this).removeClass("heartAnimation").attr("rel","like");
		$(this).css("background-position","left");
	}
});
//看是否已经点赞了
$(function(){
	var tvId = $("#tvId").val();
	
	$.ajax({
		url:"isPraised?tvId="+tvId,
		success:function(data){
			if(data=="SUCCESS"){
				$("#like1").addClass("heartAnimation").attr("rel","unlike");
			}
		}
	});
	
	loadRemark(tvId,0);
	
});
/**
 * 评论功能
 */
//评论字数判断
$("#remarkContent").keyup(function(){
	var remarkContent = $(this).val();
	if(remarkContent.length>140){
		alert("字数超出限制!");
		remarkContent = remarkContent.substring(0,140);
		$(this).val(remarkContent);
	}
	$("#remarkFontCount").text(140-remarkContent.length);
	
});

//评论提交按钮

function submitRemark(){
		var grades = $("#remarkGrades").text();
	if(grades==0){
		alert("请评分哦，最低1分~");
	}else{
		var content = $("#remarkContent").val();
		var tvId = $("#tvId").val();
		$.ajax({
			url:"submitRemark",
			data:{tvId:tvId,content:content,grades:grades},
			success:function(data){
				if(data=="SUCCESS"){
					loadRemark(tvId,0);
					$("#remarkContent").val("");
					$("#remarkFontCount").text("140");
				}else if(data=="LOGIN"){
					location="/loginPage";
				}
			}
		});
	}
}
//为页码绑定事件
$("#pageIndex,#pageBefore,#pageAfter,#pageEnd").on("click",function(){
	var tvId = $("#tvId").val();
	var start=$(this).attr("load");
	loadRemark(tvId,start);
});
function loadRemark(tvId,start){
	
	//加载评论
	$.ajax({
		url:"listRemark",
		data:{tvId:tvId,start:start},
		success:function(data){
			$("#remark").empty();
			var page = data;
			var remarks = page.list;
			console.log("评论数为"+remarks.length);
			var htmlStr="";
			if(remarks.length != 0){
				//加载评论
				for(var i=0;i<remarks.length;i++){
					htmlStr+="<div class='item-remark'><div><img src='user_headimage_load?pictureId="+remarks[i].user.userDetail.img_url+"' class='img-circle user-icon'><font size='-1'>"+remarks[i].user.userDetail.nickname+"</font><br>";
					htmlStr+="<font color=''#989898' size='-2'>"+getDate(remarks[i].create_date)+"</font><font style='float:right;margin-right:10px;margin-top:-10px;' size='+1' color='red'>"+remarks[i].grades+"</font></div><div style='margin:26px 0px;'>"+remarks[i].content+"</div></div>";
				}
				$("#remark").html(htmlStr);
				
				//页码处理
				$("#pageBefore").attr("load",page.pageNum-1);
				$("#pageAfter").attr("load",page.pageNum+1);
				$("#pageEnd").attr("load",page.pages);
				//评论总数
				$("#sumRemark").text("(共"+page.total+"条)");
			}else{
				$("#remark").text("暂无评论");
			}
		}
	});
	
}
</script>

<script type="text/javascript">
var GradList = document.getElementById("QuacorGrading").getElementsByTagName("input");

for(var di=0;di<parseInt(document.getElementById("QuacorGradingValue").getElementsByTagName("font")[0].innerHTML);di++){
	GradList[di].style.backgroundPosition = 'left center';
}

for(var i=0;i < GradList.length;i++){
	GradList[i].onmouseover = function(){
		for(var Qi=0;Qi<GradList.length;Qi++){
			GradList[Qi].style.backgroundPosition = 'right center';
		}
		for(var Qii=0;Qii<this.name;Qii++){
			GradList[Qii].style.backgroundPosition = 'left center';
		}
		document.getElementById("QuacorGradingValue").innerHTML = '<b><font size="+1" id="remarkGrades" color="#fd7d28">'+this.name+'</font></b>分';
	}
}
</script>
<script>
//处理影片详情，剪切字符串
$(function(){
	$(".tvDescri").each(function(){
		var content = $(this).attr('title');
		content = subStringContent(content)+"...";
		$(this).text(content);
	});
});
function subStringContent(str){
	var content = str;
	return content.substring(0,10);
}

$("body").on("mouseover",".tvtd",function(){
	$(this).addClass("tvselect");
});

$("body").on("mouseout",".tvtd",function(){
	$(this).removeClass("tvselect");
});
</script>